<template>
    <div class="wrapper">
      <el-page-header @back="goBack" content="活动详情"></el-page-header>
      <h2>{{activity.activityName}}</h2>
      <div class="time">活动时间：{{activity.activityTime}} &emsp;&emsp; <i class="el-icon-view"></i> {{activity.views}}</div>
      <div class="content">
        <div class="detail ql-editor" v-html="activity.activityDetails">
        </div>
      </div>
      <el-divider></el-divider>
    </div>
</template>

<script>
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    export default {
        name: "ActivityDetails",
        data(){
            return{
                activity: {}
            }
        },
        methods: {
            getData(){
                const activityId = this.$route.query.activityId;
                const params={activityId: activityId};
                this.getRequest('/getActivityDetail', params).then(resp=>{
                    if(resp){
                        this.activity=resp;
                    }else{
                        console.log("活动详情页获取失败");
                    }
                })
            },
            goBack(){
                this.$router.back();
            },
        },
        created() {
            this.getData();
        }
    }
</script>

<style scoped>
  .wrapper{
    padding-left: 5%;
  }
  h2{
    text-align: center;
    margin-top: 20px;
    color: darkred;
  }
  .time{
    text-align: center;
    font-size: 14px;
    margin: 15px 0;
    color: cadetblue;
  }
  .detail{
    text-indent: 2em;
    line-height: 2em;
    font-size: 17px;
    min-height: 500px;
  }

</style>
